<template>
	<view class="control-page">
		<framelayout>
			<uni-forms slot='configure' ref="form" :modelValue="data" label-width='25%' class='form'>
				<uni-forms-item label="level" required>
					<div class="box">
						<view class="list">
							<view class='item' v-for="(item, index) in data.list" :key="index">
								<div class="row">
									<span class='label'>提现金额:</span>
									<span class='value'>{{item.withdrawalAmount}}</span>
								</div>
								<div class="row">
									<span class='label'>提现账号:</span>
									<span class='value'>{{item.withdrawAccount}}</span>
								</div>
								<div class="row">
									<span class='label'>提现单号:</span>
									<span class='value'>{{item.withdrawalNumber}}</span>
								</div>
								<div class="row">
									<span class='label'>申请时间:</span>
									<span class='value'>{{item.applicationTime}}</span>
								</div>
								<div class="row">
									<span class='label'>处理时间:</span>
									<span class='value'>{{item.processingTime}}</span>
								</div>
								<div class="row">
									<span class='label'>完成时间:</span>
									<span class='value'>{{item.completeTime}}</span>
								</div>
								<div class="btn" @click='listdel(index)'>删除</div>
							</view>
						</view>
						<div class="edit-form">
							<uni-easyinput class='edit-item' type="text" v-model="withdrawalAmount"
								placeholder="请输入提现金额" />
							<uni-easyinput class='edit-item' type="text" v-model="withdrawAccount"
								placeholder="请输入提现账号" />
							<uni-easyinput class='edit-item' type="text" v-model="withdrawalNumber"
								placeholder="请输入提现单号" />
							<uni-easyinput class='edit-item' type="text" v-model="applicationTime"
								placeholder="请输入申请时间" />
							<uni-easyinput class='edit-item' type="text" v-model="processingTime"
								placeholder="请输入处理时间" />
							<uni-easyinput class='edit-item' type="text" v-model="completeTime" placeholder="请输入完成时间" />
							<div class="btn" @click='listadd'>
								<div class="text">添加</div>
								<div class="icon">
									<u-icon name="plus" size="14" color="#fff" :bold="true"></u-icon>
								</div>
							</div>
						</div>
					</div>
				</uni-forms-item>
				<u-button text="提交" :customStyle="{width:'80px'}" type="primary" @click="submit"></u-button>
			</uni-forms>
			<withdrawal slot='preview' :configureData='data' :isDisplay='true'></withdrawal>
		</framelayout>
	</view>
</template>

<script>
	import framelayout from "./framelayout.vue"
	import withdrawal from "@/pages/withdrawal/withdrawal.vue"
	import {
		dataBaseMixin
	} from "@/mixins/dataBaseMixin.js"
	export default {
		mixins: [dataBaseMixin],
		components: {
			framelayout,
			withdrawal,
		},
		data() {
			return {
				data: {
					list: []
				},
				withdrawalAmount: '',
				withdrawAccount: '',
				withdrawalNumber: '',
				applicationTime: '',
				processingTime: '',
				completeTime: '',
			}
		},
		mounted() {
			this.getData('withdrawalData')
		},
		methods: {
			// 提交
			submit() {
				this.updateData('withdrawalData')
			},

			listdel(index) {
				this.data.list.splice(index, 1)
			},
			listadd() {
				this.data.list.push({
					withdrawalAmount: this.withdrawalAmount,
					withdrawAccount: this.withdrawAccount,
					withdrawalNumber: this.withdrawalNumber,
					applicationTime: this.applicationTime,
					completeTime: this.completeTime,
					processingTime: this.processingTime,
					options: [{
						title: '提现申请已提交',
						desc: this.applicationTime
					}, {
						title: '银行处理中',
						desc: this.processingTime
					}, {
						title: '银行到账成功',
						desc: this.completeTime
					}],
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.control-page {
		.form {
			padding: 10px;
		}

		::v-deep .uni-forms-item__content {
			display: flex;
			flex-wrap: wrap;
		}

		.img {
			max-width: 100px;
		}

		.box {
			width: 100%;
		}

		.list {
			width: 100%;
			padding: 10px;
			border: 1px solid #eaeaea;
			border-radius: 8px;
			display: flex;
			flex-wrap: wrap;
			min-height: 50px;
			box-sizing: border-box;

			.item {
				padding: 0 10px;
				margin-bottom: 10px;
				border-left: 4px solid #53a52a;
				font-size: 12px;

				.label {
					display: inline-block;
					color: #999;
					margin-right: 6px;
				}

				.value {
					display: inline-block;
					font-weight: bold;
				}
			}

			.btn {
				height: 24px;
				border-radius: 8px;
				overflow: hidden;
				background-color: #ea0000;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 12px;
				padding: 0 10px;
				width: max-content;
				margin-top: 3px;
			}
		}

		.edit-form {
			width: 100%;

			::v-deep .edit-item {
				width: 100%;
				margin: 3px 0;
			}

			.btn {
				display: flex;
				align-items: center;
				background-color: #52b6a6;
				width: max-content;
				height: 28px;
				border-radius: 8px;
				font-size: 12px;
				color: #fff;
				padding: 0 10px;
				margin-top: 3px;

				.icon {
					margin-left: 2px;
					display: flex;
					justify-content: center;
					align-items: center;
					width: 20px;
					height: 20px;
				}
			}

		}
	}
</style>
